<template>
  <div class="tab-title-page">
    <div class="nav_tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="商品排序"
          name="sort"
        ></el-tab-pane>
        <el-tab-pane
          label="轮播图设置"
          name="banner"
        ></el-tab-pane>
        <el-tab-pane
          label="店铺分类设置"
          name="classify"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <el-divider class="middle_divider"></el-divider>
    <div class="child_page">
      <sort-set
        v-if="activeName==='sort'"
        ref="sortSet"
      ></sort-set>
      <banner-set
        v-if="activeName==='banner'"
        ref="bannerSet"
      ></banner-set>
      <classify-set
        v-if="activeName==='classify'"
        ref="classifySet"
      ></classify-set>
    </div>
  </div>
</template>

<script>
import sortSet from "./child/sort";
import bannerSet from "./child/banner";
import classifySet from "./child/classify";
export default {
  components: { sortSet, bannerSet, classifySet },
  data() {
    return {
      activeName: 'sort'
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss">
.top_exp {
  padding: 20px 30px;
  background: #f5f5f5;
  img {
    margin-right: 28px;
  }
  .warn-box {
    flex-direction: column;
    height: fit-content;
    align-items: flex-start;
  }
}
.list_content {
  padding: 30px;
}
</style>